import React from "react";
import cn from "classnames";

import { ThemeEnum, set } from "./themeSlice";
import styles from "./Theme.module.css";
import { useAppDispatch, useAppSelector } from "../../app/hooks";
import SunSvg from "../../app/shared/svg/Sun";
import SvgIcon from "../../app/shared/SvgIcon";
import MoonSvg from "../../app/shared/svg/Moon";

interface ThemeProps {
    className?: string;
}

// eslint-disable-next-line
const Theme = ({ className }: ThemeProps) => {
    const theme = useAppSelector((state) => state.theme);
    const dispatch = useAppDispatch();

    React.useEffect(() => {
        document.documentElement.dataset.theme = theme;
        localStorage.setItem("theme", theme);
    }, [theme]);

    const handleChange = () => {
        const next: ThemeEnum =
            theme === ThemeEnum.dark ? ThemeEnum.light : ThemeEnum.dark;
        dispatch(set(next));
    };

    return (
        <div
            className={styles["switch-mode"]}
            onClick={handleChange}
            tabIndex={0}
        >
            <div
                className={cn(
                    styles.modes,
                    theme === ThemeEnum.dark && styles["is-flipped"]
                )}
            >
                <div
                    className={cn(
                        styles["modes__icon"],
                        styles["modes__icon--light"]
                    )}
                >
                    <SvgIcon
                        title="click to switch to light mode"
                        SVG={SunSvg}
                    />
                </div>
                <div
                    className={cn(
                        styles["modes__icon"],
                        styles["modes__icon--dark"]
                    )}
                >
                    <SvgIcon
                        title="click to switch to dark mode"
                        SVG={MoonSvg}
                    />
                </div>
            </div>

            <span>{theme === ThemeEnum.dark}</span>
        </div>
    );
};

export default Theme;
